<template>
  <div class="container">
    <div class="content-box">
      <!--    下单详情区域-->
      <div class="box">
        <div class="title">套餐包下单</div>
        <div class="content">
          <el-form ref="formData" :model="formData" label-width="100px">
            <el-form-item label="购买套餐：">
              <div class="package">
                <div class="package-name">{{formData.packageName || ''}}</div>
                <div class="price-box">
                  <span class="rmb">¥</span>
                  <!-- 现卖价-->
                  <span class="price">{{formData.salePrice || 0}}</span>
                </div>
                <div class="origin-price">原价：¥{{formData.originalPrice || 0}}</div>
              </div>
            </el-form-item>
            <!-- 登录用户为商户展示选择油站-->
            <el-form-item label="选择油站：" v-if="loginInfo.company">
              <el-select v-model="formData.gasId" filterable placeholder="请选择" @change="oilStationChange">
                <el-option
                    v-for="item in oilStationOptions"
                    :key="item.gasId"
                    :label="item.gasName"
                    :value="item.gasId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="应付金额：">
              <div class="price-box">
                <span class="rmb">¥</span>
                <span class="price">{{formData.salePrice || 0}}</span>
              </div>
            </el-form-item>
            <el-form-item label="">
              <el-checkbox v-model="checked">
                <span>同意</span>
              </el-checkbox>
              <router-link to="/marketCenter/userAgreement" class="agreement">《能链商户套餐包协议》</router-link>
            </el-form-item>
          </el-form>
          <div class="btn-box">
            <el-button @click='cancelbtn' style='margin-right:10px;'>取消</el-button>
            <el-button  type="primary" @click="submitForm('form')" :disabled="!checked" :loading="submitLoading">提交</el-button>
          </div>
        </div>
      </div>
      <!--    温馨提示-->
      <div class="tip-box">
        <div class="title">温馨提示</div>
        <div class="text">
          <span class="icon">*</span>
          <span>不同类型套餐包含的权益也不相同，具体的权益功能请在权益商城首页进行查看；</span>
        </div>
        <div class="text">
          <span class="icon">*</span>
          <span>权益套餐包购买后不支持退款；</span>
        </div>
        <div class="text">
          <span class="icon">*</span>
          <span>客服收到付款凭证后将第一时间跟您核对，确认无误后给您开通VIP权益；</span>
        </div>
        <div class="text">
          <span class="icon">*</span>
          <span>如有疑问请联系客服：400-0835-999。</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { bookPackage, getAllGasInfoList } from '@/api/market'
export default {
  name: "placeOrder",
  data () {
    return {
      formData: {
        packageCode: '', //套餐包编码
        packageName: '', //套餐名称
        originalPrice:'', // 原价
        salePrice: '', // 现价
        gasId: '', // 油站ID
        gasName: '', // 油站名称
      },
      placeOrderDetail: {}, // 下单完成返回的订单信息
      checked : false,
      submitLoading: false, //  确定按钮loading
      oilStationOptions: [], // 油站列表
      loginInfo: {} // 当前登录用户信息
    }
  },
  created () {
    // 获取当前套餐包的信息
    let params = this.$route.params
    let paramsStorage = JSON.parse(sessionStorage.getItem('params') || '{}')
    this.formData = {
      packageCode: params.packageCode || paramsStorage.packageCode, //套餐包编码
      packageName: params.packageName || paramsStorage.packageName, //套餐名称
      originalPrice: params.originalPrice || paramsStorage.originalPrice, // 原价
      salePrice: params.salePrice || paramsStorage.salePrice // 现价
    }
    this.loginInfo = JSON.parse(sessionStorage.getItem('loginInfo') || '{}')
  },
  mounted () {
    // company true 商户 false 油站
    if (this.loginInfo.company) {
      // 如果是商户就进行商户下油站查询
      this.getAllGasInfoList()
    } else {
      this.formData.gasId = this.loginInfo.gasId
      this.formData.gasName = this.loginInfo.gasName
    }
  },
  methods: {
    // 下单购买套餐包
    async bookPackageAjax () {
      try {
        let {gasId, gasName, packageCode, salePrice } = this.formData
        if (!gasId) {
          this.$message.error('请选择油站')
          return
        }
        this.submitLoading = true
        let params = {
            gasId,
            gasName,
            packageCode,
            amountPay: salePrice
        }
        const { code, result } = await bookPackage(params)
        this.submitLoading = false
        if (code === 412) {
          this.$confirm('当前油站已有一个未完成的订单，暂时不能生成其他订单，请先付款或取消订单', '提交失败', {
            confirmButtonText: '查看订单',
            cancelButtonText: '取消',
            center: true
          }).then(() => {
            this.$router.push('/marketCenter/myOrder')
          }).catch(() => {
            console.log('取消')
          })
        } else if (code !== 200) {
          return
        } else {
          this.placeOrderDetail = result || {}
          // 支付标识:1,"未支付";2,"已支付";3,"已退款";4,"已取消"
          if (this.placeOrderDetail.orderStatus === 1) {
            // 生成订单跳转到订单支付页面
            this.$router.push({path: '/marketCenter/paymentOrder', query: {orderNo: result.orderNo}})
          } else {
            this.$router.push({path: '/marketCenter/orderCompletion', query: {amountPay: result.amountPay,gasId}})
          }
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 获取该用户名下所有的油站
    async getAllGasInfoList () {
      try {
        const { code, result } = await getAllGasInfoList()
        if (code !== 200) return
        this.oilStationOptions = result || []
         // 如果该商户下只有一个油站默认选中
        if (this.oilStationOptions.length === 1) {
          this.formData.gasId =  this.oilStationOptions[0].gasId
          this.formData.gasName =  this.oilStationOptions[0].gasName
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 取消
    cancelbtn () {
       // 返回上级页面
       this.$router.go(-1)
    },
    // 确认
    submitForm () {
      // 下单购买套餐包
      this.bookPackageAjax()
    },
    // 选择油站变更获取油站名称
    oilStationChange (val) {
      let checkedItem = this.oilStationOptions.find((item) => {
          return item.gasId === val
      })
      this.formData.gasName =  checkedItem.gasName
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  padding: 20px 10px 0 10px;
  .content-box {
    min-width: 640px;
    background: #ffffff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-bottom: 72px;
  }
}
.box {
  width: 640px;
  padding: 48px 130px 56px 130px;
  /deep/ .el-select {
    width: 100%;
  }
  /deep/ .el-form-item__label {
    font-size: 16px;
    color: #333333;
    font-weight: 400;
  }
  .title {
    color: #333333;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 48px;
  }
  .price-box {
    color: #E31837;
    height: 40px;
    line-height: 40px;
  }
  .rmb {
    font-size: 20px;
  }
  .price {
    font-size: 32px;
  }
  .package {
    height: 134px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #F8FAFF;
    border: 2px solid #4B7EFE;
    border-radius: 8px;
    padding: 20px 0;
    .package-name {
      width: 100%;
      text-align: center;
      color: #333333;
      padding: 0 10px;
      font-weight: bold;
      font-size: 18px;
      line-height: 24px;
      height: 24px;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

    }
    .origin-price {
      line-height: 20px;
      height: 20px;
      color: #999999;
      font-size: 14px;
      text-decoration: line-through;
    }
  }
  .agreement {
    color: #4B7EFE;
  }
  .btn-box {
    text-align: center;
    /deep/ .el-button {
      padding: 12px 0;
      width: 174px;
    }
  }
}
.tip-box {
  width: 640px;
  background: #F8F8F8;
  border-radius: 2px;
  padding: 24px 32px 32px 32px;
  .title {
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .text {
    font-size: 14px;
    color: #666666;
    line-height: 30px;
    height: 30px;
  }
}
</style>
